<template>
  <div id="category">
    <div class="header">
      <router-link to="/home/search" tag="div" class="search">
        <van-icon name="search" size="14px" />商品搜索，共239款好物
      </router-link>
    </div>

    <div class="cont">
      <van-sidebar v-model="activeKey" class="navlist">
        <van-sidebar-item
          v-for="item in navList"
          :key="item.id"
          :title="item.name"
          @click="open({id:item.id})"
        />
      </van-sidebar>

      <div class="sublist">
        <img :src="subList.banner_url" alt class="banner" />
        <div class="title">—— {{subList.name}}分类 ——</div>
        <ul class="sub-cont">
          <router-link tag="li" :to="`/category/categoryList?id=${item.id}`" v-for="item in subList.subList" :key="item.id" class="sub-item">
            <img :src="item.banner_url" class="item-img" />
            <div class="item-title">{{item.name}}</div>
          </router-link>
          <li class="item-last"></li>
          <li class="item-last"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { currentaction, indexaction } from "@/api/category";
export default {
  data() {
    return {
      navList: "",
      subList: "",
      activeKey: "",
    };
  },
  created() {
    indexaction().then((res) => {
      this.navList = res.categoryList;
    });
    currentaction({
      id: 1005000,
    }).then((res) => {
      this.subList = res.data.currentOne;
    });
  },
  methods: {
    open(obj) {
      currentaction(obj).then((res) => {
        this.subList = res.data.currentOne;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 375px;
  height: 38px;
  .search {
    width: 345px;
    height: 28px;
    margin: 8px auto;
    border-radius: 5px;
    background-color: rgb(237, 237, 237);
    line-height: 28px;
    text-align: center;
  }
}
.cont {
  width: 375px;
  border-top: 1px solid rgb(237, 237, 237);
  height: calc(100% - 38px);
  overflow: auto;
  display: flex;
  justify-content: space-between;
  .navlist {
    width: 84px;
  }
  .sublist {
    margin: 0 15px;
    .banner {
      width: 263px;
      height: 111px;
      margin-top: 15px;
    }
    .title {
      width: 263px;
      height: 66px;
      text-align: center;
      line-height: 66px;
    }
    .sub-cont {
      width: 263px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .sub-item {
        width: 82px;
        height: 88px;
        padding: 0 5px;
        margin-bottom: 4px;
        box-sizing: border-box;
        .item-img {
          width: 52px;
          height: 52px;
          display: block;
          margin: 0 auto;
        }
        .item-title {
          width: 72px;
          margin-top: 6px;
          text-align: center;
        }
      }
      .item-last{
          width: 82px;
          height: 0;
      }
    }
  }
}
</style>